<template>

	<view v-else class="user_edit wap">
		<view class="group group_hd">
			<view class="lab"></view>
			<view class="inp_box">
				<image class="image_user" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/app/banner.png" mode="aspectFill" />
			</view>
		</view>
		<view class="group" @click="nav_to('/pages/user/user_edit')">
			<view class="lab_red">重要提示：如您想在APP同步微信小程序账号信息，请在小程序里绑定手机号(点击绑定)</view>
			<view class="inp_box">
		
			</view>
		</view>
		<view class="group">
			<view class="lab">第一种方式：手机扫码下载</view>
			<view class="inp_box">			
					
			</view>
		</view>
		<view class="group group_hd">
			<view class="lab"></view>
			<view class="inp_box">
				<image class="qr_img" @click="preview_img('https://golfdate.oss-cn-shenzhen.aliyuncs.com/app/ios_app_url.png')"
					src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/app/ios_app_url.png" mode="aspectFill" />
					<view>iOS APP</view>
					</view>
			<view class="inp_box">
					<image class="qr_img" @click="preview_img('https://golfdate.oss-cn-shenzhen.aliyuncs.com/app/hw_app_url.png')"
						src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/app/hw_app_url.png" mode="aspectFill" />
						<view>华为安卓 APP</view>
			</view>
		</view>
		
		<view class="group">
			<view class="lab">第二种方式：AppStore 或 华为应用市场，搜索“Golfdate"</view>
			<view class="inp_box">

			</view>
		</view>
		<view class="group group_hd">
			<view class="lab"></view>
			<view class="inp_box">
				<image class="page_img" @click="preview_img('https://golfdate.oss-cn-shenzhen.aliyuncs.com/app/app_url_page.jpg')"
					src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/app/app_url_page.jpg" mode="aspectFill" />
					<view>AppStore 搜索界面</view>
					</view>
			<view class="inp_box">
					<image class="page_img" @click="preview_img('https://golfdate.oss-cn-shenzhen.aliyuncs.com/app/hw_app_page.jpg')"
						src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/app/hw_app_page.jpg" mode="aspectFill" />
					<view>华为应用 搜索界面</view>
			</view>
		</view>
		
		
		<view class="group">
			<view class="lab">第三种方式：复制链接 浏览器</view>
			<view class="inp_box">			
					
			</view>
		</view>
		<view class="group">
			<view class="lab"></view>
			<view class="inp_box">			
					
			</view>
		</view>
		<view class="group">
			<view class="lab">iOS 下载链接（点击复制）</view>
			<view class="inp_box" @click="clip_url('https://apps.apple.com/cn/app/golfdate/id6469476053')">
				https://apps.apple.com/cn/app/golfdate/id6469476053 
			</view>
		</view>
		<view class="group">
			<view class="lab">华为安卓下载链接（点击复制）</view>
			<view class="inp_box" @click="clip_url('https://url.cloud.huawei.com/oS8p92RP6E')">
				https://url.cloud.huawei.com/oS8p92RP6E
			</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		components: {},
		data() {

			return {

			};
		},
		methods: {
			clip_url(url) {
				let _this=this;
				wx.setClipboardData({
					data: url,
					success(res) {
						// wx.getClipboardData({
						// 	success(res) {
						// 		console.log(res.data) // data
						// 	}
						// });
						
						_this.$pv.msg('复制成功');
					}
				});
			},
			preview_img(url) {
				wx.previewImage({
					current: url, //当前图片地址
					urls: ['https://golfdate.oss-cn-shenzhen.aliyuncs.com/app/app_url_page.jpg',
						'https://golfdate.oss-cn-shenzhen.aliyuncs.com/app/hw_app_page.jpg',
						'https://golfdate.oss-cn-shenzhen.aliyuncs.com/app/ios_app_url.png',
						'https://golfdate.oss-cn-shenzhen.aliyuncs.com/app/hw_app_url.png'],
					success: function(res) {

						console.log('预览图片成功！')

					},

					fail: function(res) {

						console.log('预览图片失败！')

					}

				})
			},

			async onLoad(e) {


			},
			onUnload() {

			}
		}
	};
</script>

<style lang="scss">
	.user_edit {
		padding-bottom: 100rpx;
	}

	.tip {
		margin-top: 32rpx;
		height: 70rpx;
		background: rgba(254, 240, 188, 0.2);
		border-radius: 4rpx;
		color: #fef0bc;
		line-height: 70rpx;
		text-align: center;
	}

	.user_header_btn {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		border-radius: 0;
	}

	.user_header,
	.cover_btn {
		border-radius: 10rpx;
		overflow: hidden;
		height: 100rpx;
		width: 100rpx;
		background: rgba(255, 255, 255, 0.1);
		margin-left: 0;
		display: flex;
		// text-align: center;
		justify-content: center;
		align-items: center;

		.iamge_icon {
			height: 60rpx;
			width: 60rpx;
		}

		.image_user {
			height: 100%;
			width: 100%;
		}


	}

	.lab {
		padding-right: 10rpx;
		color: #fff;
		font-size: 32rpx;
		.msg {
			display: inline-block;
			padding-left: 10rpx;
			font-size: 28rpx;
			color: #dd3232;
		}
	}
.lab_red {
		padding-right: 10rpx;
		color: #ff2410;
		font-size: 36rpx;
		
	}
	.group {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		position: relative;
		margin-bottom:20rpx;
		&::after {
			position: absolute;
			bottom: 0;
			right: 0;
			left: 0;
			height: 2rpx;
			content: '';
			transform: scaleY(.6);
			background-color: #404040;
		}

		.inp_box {
			flex: 1;
			//display: flex;
			align-items: center;

			input {
				width: 100%;
				text-align: right;
			}

			text {
				width: 100%;
				text-align: right;
			}
		}

		.icon_box {
			height: 40rpx;
			width: 40rpx;
			line-height: 40rpx;
		}

		.inp_append {
			margin-left: 8rpx;
		}
		.page_img {
			//height: 256rpx;
			width: 256rpx;
		}
		.qr_img {
			height: 256rpx;
			width: 256rpx;
		}

	}

	.group_hd {
		height: auto;
		padding-bottom: 20rpx;
		padding-top: 20rpx;
	}

	.m40 {
		margin-top: 50rpx;
	}

	.group_textarea {
		flex: 1;
		height: 200rpx;
		padding-top: 12rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;

		/deep/ .u-textarea {
			background: none !important;
			// border-bottom: none !important;
			border-color: rgba(64, 64, 64, 1) !important;
			padding-left: 20rpx;
		}

		/deep/ .u-textarea__count {
			background: none !important;
			color: #fff !important;
		}

		/deep/ .u-textarea__field {
			color: #fff !important;
		}
	}



	.inp_box_r {
		display: flex;
		justify-content: flex-end;
	}

	.text_r {
		text-align: right;
	}

	.group_warp {
		padding-bottom: 20rpx;
		display: block;
		height: auto;
	}
</style>